<template>
  <!-- 扫码交接 -->
  <view class="scan">
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog ref="dialog" mode="input" title="手动输入" placeholder="请输入编码" @confirm="confirm"></uni-popup-dialog>
    </uni-popup>
    <view class="scan-center">

      <view @tap="scan">
        <m-icon class="scan-part" type="scan"></m-icon>
        <button class="scan-btn" type="primary">扫码交接</button>
      </view>
      <text class="primary-text block" @tap="openDialog">手动输入</text>
    </view>

  </view>
</template>
<script>
  import mIcon from '@/components/m-icon/m-icon.vue';
  export default {
    components: {
      mIcon
    },
    data() {
      return {
        code: ''
      }
    },
    methods: {
      // 扫码交接
      scan() {
        // this.gotoScanDetail(this.code);
        // 允许从相机和相册扫码
        uni.scanCode({
          success: res => {
            console.log('条码类型：' + res.scanType);
            console.log('条码内容：' + res.result);
            this.code = res.result;
            this.gotoScanDetail(this.code);
          },
          fail: () => {
            // this.$toast('扫码失败');
          }
        });
      },
      // 隔离人员扫码交接
      gotoScanDetail(code = '') {
        uni.navigateTo({
          url: `/pages/scan/index?code=${code}`
        });
      },
      openDialog() {
        this.code = ''
        this.$refs.popup.open()
      },
      confirm(val) {
        this.code = val
        this.gotoScanDetail(this.code);
      }
    }
  };
</script>
<style lang="scss">
  .scan {
    width: 100%;
    padding: 20rpx 40rpx;
    position: relative;

    &-center {
      width: 35%;
      position: absolute;
      left: 50%;
      top: 24%;
      transform: translate(-50%, -24%);
      font-size: 32rpx;
      line-height: 2;
      text-align: center;
    }

    &-part {
      font-size: 160rpx;
      color: rgba($color: $uni-color-primary, $alpha: 1);
    }

    &-btn {
      margin-top: 30rpx;
      border-radius: 42rpx;
    }

  }

  .primary-text {
    display: inline-block;
    margin-top: 30rpx;
    color: $uni-color-primary;
  }
</style>